<%@ page language="java" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
    <%@include file="../common/base.jsp"%>
	<meta charset="utf-8" />
	<meta name ="viewport" content ="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache,must-revalidate">
	<meta http-equiv="expires" content="0">
	<title>评价</title>
    <link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="${base}/css/global.css?version=${version}">
    <link rel="stylesheet" type="text/css" href="${base}/css/takecar.css?version=${version}">
    <style type="text/css">
        body{
            background-color: #fff;
        }
        a:focus, a:hover{
            text-decoration: none;
        }
        .divBox{
            width: 100%;
            border:none;
            box-shadow: none;
            margin-top: 0px;
        }
        .cancelPaybtn{
            color: #9ea7b1;
            text-decoration: none;
        }
        .ratesBox{
            text-align: center;
            width: 94%;
            margin: 0 auto;
        }
        .ratesBox:after,.ratesBox:before{
            content: '';
            display: block;
            clear: both;
        }
        .rateBox{
            /* width: 35%; */
            /*display: inline-block;*/
             display: none;
            text-align: center;
            border: solid 1px #e4e7ea;
            padding: 5px;
            font-size: 18px;
            color: #9ea7b1;
            border-radius: 4px;
            padding: 5px 10px;
            margin-top: 10px;
            margin-left: 10px;
            text-decoration: none;
        }

        .rateBox:nth-child(even){
            margin-left: 15px;
        }
        .rateBox-select{
            border: 1px solid #4f5a67;
            color: #4f5a67;
        }

        .otherRate{
            width: 85%;
            margin: 10px auto;
            display: block;
            resize: none;
            height: 60px;
            border: 1px solid #e4e7ea;
            font-size: 14px;
            padding: 5px;
            /*color: #d0d5d9;*/
        }
        .btn-pay:focus,.btn-pay:hover{
            color: #fff;
        }
        a:focus, a:hover{
            color: #9ea7b1;
        }
        .btn-rated > .img{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
    	<div class="divBox router-info">
    		<p class="text-center clearfix">
    			<a class="pull-left cancelPaybtn" href="#">取消</a>
    			<span>评价</span>
    		</p>
            <div class="text-center btn-rated" href="#">
                <img data-count="1" class="img" src="${base}/images/star_big.png">
                <img data-count="2" class="img" src="${base}/images/star_big.png">
                <img data-count="3" class="img" src="${base}/images/star_big.png">
                <img data-count="4" class="img" src="${base}/images/star_big.png">
                <img data-count="5" class="img" src="${base}/images/star_big.png">
            </div>

            <div class="ratesBox" id="evaluate">
                <a class="rateBox" href="#">车内整洁</a>
                <a class="rateBox" href="#">活地图</a>
                <a class="rateBox" href="#">驾驶平稳</a>
                <a class="rateBox" href="#">态度好服务棒</a>
            </div>

            <textarea placeholder="其他想说的(将匿名并延迟告知司机)" class="otherRate" id="comment"></textarea>

    	</div>
    	
    	<a class="btn-pay">
    		匿名评价
    	</a>
    </div>
</body>
<script type="text/javascript" src="${base}/js/jquery.min.js"></script>
<script type="text/javascript" src="${base}/js/localStorageOpt.js?version=${version}"></script>
<script type="text/javascript" src="${base}/plugin/layer-v3.0.3/layer.js"></script>
<%--<script type="text/javascript" src="${base}/plugin/crypto-js/crypto-js.min.js"></script>--%>
<%--<script type="text/javascript" src="${base}/plugin/jsencrypt/jsencrypt.min.js"></script>--%>
<script type="text/javascript" src="${base}/js/utils.js?version=${version}"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	
	var $document = $(document);
    var yun=new yueajax( "${openId}");
    var num= +getQueryString('num');
    var parme={
        orderUuid:yun.orderUuid,
        comment:'',//评价内容
        commentStr:'',//评价标签
        score:''//评分
    };
    (function (){
        yun.ajax_md5(
            {},
            '${base}/api/v1/passenger/tag/evaluate',
            function (data) {
                var html='',d=data.data;
                for(var i in d){
                    var di=d[i];
                    html+='<div class="rateBox star'+di.star+'" data-uuid="'+di.uuid+'" >'+di.tagName+'</div>'
                }
                $('#evaluate').html(html);
                $('#evaluate').find('.rateBox.star1').css({'display':'inline-block'});
                ping(num+1,4-num)
            },
            function (data) {
                
            }
        )
    })();
    // 匿名评价
    $document.on('touchend','.btn-pay',function(){
        var url='${base}/api/v1/passenger/token/comment/add'
        if($('#comment').val().length>=20){
            layer.msg('评价内容不得超过20字')
            return;
        }
        if(!parme.score){
            layer.msg('请先对司机进行评分！')
            return;
        }
        var evaluate=$('#evaluate .star'+parme.score+'.rateBox-select');
        if(evaluate.length!=0){
            var arr=[];
            for(var e=0;e<evaluate.length; e++){
                var ee=evaluate[e];
                arr.push($(ee).html())
            }
            parme.commentStr=arr.join(',')
        }
        parme.comment=$('#comment').val();
        yun.ajax_md5(
            parme,
            url,
            function (data) {
                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                parent.layer.close(index);
                var wt=window.top;
                wt.location.reload()
//                changeUrl('ratedialog',yun.orderUuid);
            },
            function (data) {
                layer.msg(data.msg);
            }
        )
    });

    // 取消
    $document.on('touchend','.cancelPaybtn',function(){
        // 关闭窗口
        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
    });

    // 选择评价
    $document.on('touchend','.rateBox',function(){
        var $this =$(this);
        var flag = $this.hasClass('rateBox-select');
        if(flag){
            $this.removeClass('rateBox-select');
        }else{
            $this.addClass('rateBox-select');
        }
    });

    // 评星级
    $document.on('click','.btn-rated .img',function(){

        var $this = $(this);
        var count = $this.data('count');
        var sub = 5 - count;
        ping(count,sub)
    });

    function ping(count,sub){
        var start = '${base}/images/star_big.png',
                start_pre = '${base}/images/star_pre_big.png';
        var imghtml = "";
        for(var i=0;i<count;i++){
            imghtml += '<img data-count="'+(i+1)+'" class="img" src="'+start_pre+'" />';
        }
        if(count != 0){
            for(var i=0;i<sub;i++){
                imghtml += '<img data-count="'+(i+1+count)+'" class="img" src="'+start+'" />';
            }
        }
        $('#evaluate').find('.rateBox').hide();
        $('#evaluate').find('.rateBox.star'+(count)).css({'display':'inline-block'});
        parme.score=count;
        $('.btn-rated').html('').html(imghtml);
    }
    console.log(num);


});
</script>
</html>